<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../index.css">
<div class="container-fluid" id="app">
    <form role="form">
    <div class="row pt-2">
        <div class="col">
            <input type="file" ref="file" class="form-control form-control-sm">
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <ul class="list-group list-group-sm list-group-horizontal list-group-horizontal-sm">
                <li class="list-group-item" v-for="(d,i) in digests">
                    <label :for="d.name"><input type="checkbox" v-model="ent" :id="d.name" :value="d.name">&nbsp;{{d.title}}</label>
                </li>
            </ul>
        </div>
    </div>
    <div class="row mt-3">
        <div class="col">
            <button type="button" class="btn btn-primary btn-sm" @click="calcu">计算文件的Hash值</button>
        </div>
    </div>
    </form>
    <div class="row mt-3">
        <div class="col table-responsive">
            <table class="table table-striped" v-if="fileHashArray && fileHashArray.length > 0">
                <thead>
                    <tr>
                        <td>项</td>
                        <td>值</td>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, i) in fileHashArray">
                        <td>{{item.digest}}</td>
                        <td>{{item.value}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/crypto-js/crypto-js.js"></script>
<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
<script>
const app = {
    data() {
        return {
            digests: [
                {name: 'md5', title: 'MD5', key: 0},
                {name: 'sha1', title: 'SHA1', key: 0},
                {name: 'sha224', title: 'SHA224', key: 0},
                {name: 'sha256', title: 'SHA256', key: 0},
                {name: 'sha384', title: 'SHA384', key: 0},
                {name: 'sha512', title: 'SHA512', key: 0}
            ],
            ent: ['md5', 'sha1'],
            fileHashArray: []
        }
    },
    created() {
        document.addEventListener('keyup', (e) => {
            if (e.ctrlKey && e.shiftKey && (e.key == 'I' || e.key ==  'i')) {
                parent.devTools();
            }
            if (e.ctrlKey && (e.key == 'r' || e.key == 'R')) {
                parent.refresh();
            }
        });
    },
    methods: {
        calcu() {
            this.fileHashArray = [];
            let file = this.$refs.file.files[0]
            if(undefined == file) return;
            if(0 == this.ent.length) return;
            let reader = new FileReader();
            reader.readAsArrayBuffer(file);
            reader.onload = () => {
                let wordArray = CryptoJS.lib.WordArray.create(reader.result);
                let fileHash = '';
                for(let name of this.ent) {
                    switch (name) {
                        case 'md5':
                            fileHash = CryptoJS.MD5(wordArray).toString();
                            break;
                        case 'sha1':
                            fileHash = CryptoJS.SHA1(wordArray).toString();
                            break;
                        case 'sha224':
                            fileHash = CryptoJS.SHA224(wordArray).toString();
                            break;
                        case 'sha256':
                            fileHash = CryptoJS.SHA256(wordArray).toString();
                            break;
                        case 'sha384':
                            fileHash = CryptoJS.SHA384(wordArray).toString();
                            break;
                        case 'sha512':
                            fileHash = CryptoJS.SHA512(wordArray).toString();
                            break;
                        default:
                            break;
                    }
                    let d = this.getDigest(this.digests, name)
                    this.fileHashArray.push({digest: d.title, value: fileHash})
                }
            }
        },
        getDigest(digests, name) {
            let d = '';
            for(let digest of digests) {
                if(name == digest.name) {
                    d = digest;
                    break;
                }
            }
            return d;
        }
    }
}
Vue.createApp(app).mount('#app');
</script>